<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main1.css">
    <title>Document</title>
    <script type="text/javascript">
        /*
        请写出代码，实现：
        1、点击“弹出弹框按钮”显示弹框
		2、弹框显示后，实现秒数的倒计时，秒数为0时自动隐藏弹框
		3、倒计时过程中点击“X”按钮可以隐藏弹框
        */
       	window.onload = function(){
			var obtn01 = document.getElementById("btn01")
			var opop = document.getElementById("pop")
			var ocount = document.getElementById("count")
			var oshutoff = document.getElementById("shutoff")
			var f = null;
			var num = null;
			obtn01.onclick = function(){
				opop.style.display ='block'
				f = setInterval(function(){					
					ocount.innerHTML -=1 
					num = ocount.innerHTML
					if (num < 1){
						ocount.innerHTML =5;
						opop.style.display = 'none';
						clearInterval(f);
					}
				},1000)				
			}
			oshutoff.onclick = function(){
				opop.style.display = 'none';
				ocount.innerHTML =5;				
				clearInterval(f);				
			}			
		}
    </script>
</head>
<body>
    <input type="button" value="弹出弹框" id="btn01">
    <div class="pop_main" id="pop">
        <div class="pop_con">
            <div class="pop_title">
                <h3>系统提示</h3>
                <a href="#" id="shutoff">×</a>
            </div>
            <div class="pop_detail">
                <p class="pop_text">亲！请关注近期的优惠活动！</p>
            </div>
            <div class="pop_footer">
                还有<span id="count">5</span>秒自动关闭弹框               
            </div>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>